import React, { useEffect, useState, } from "react"
import { Space, Image, Tag, Button, Pagination, message } from 'antd';
import { useSearchParams, } from "react-router-dom";
import './excelDeail.css'
import {excelDetail}from '../../api/excel'
// import { render } from "react-dom";

const ExcelDeail: React.FC = (): JSX.Element => {

  const [query]=useSearchParams()
  const [id,setid]=useState( query.get('id'))
  const [detailList,setDetaillist]:any=useState([])
  // 获取数据
  const getDetailList =async()=>{
      let res:any=await excelDetail({id:id})
      console.log(res)
      if(res.code==='00000'){
        // setDetaillist(res.data.visitor)

        if(res.data.visitor===null){
          // message.error('暂无数据')
          return false
        }else{
          setDetaillist(res.data.visitor)
        }

      }
      
  }
  useEffect(()=>{
    getDetailList()
},[id])
  return (<div className="detail">
    {/* {detailList.visitor.username} */}
    <div className="box-left">
      <div className="item">
        <div>审核人：</div>
        <div>{detailList.username}</div>
      </div>
      <div className="item">
        <div>审核状态：</div>
        <div>{detailList.status===3?<Tag color="green">终审通过</Tag>:detailList.status===2?<Tag color="gold">待终审</Tag> : <Tag color="error">error</Tag>}</div>
      </div>
      <div className="item">
        <div>审核时间：</div>
        <div>{detailList.addtime}</div>
      </div>
      <div className="item">
        <div>来访人：</div>
        <div>{detailList.username}</div>
      </div>
      <div className="item">
        <div>来访人电话：</div>
        <div>{detailList.mobile}</div>
      </div>
      <div className="item">
        <div>来访人身份证：</div>
        <div>{detailList.card}</div>
      </div>
      <div className="item">
        <div>进校目的：</div>
        <div>{detailList.reason}</div>
      </div>
      <div className="item">
        <div>来访车牌号：</div>
        <div>{detailList.carnumber}</div>
      </div>
      <div className="item">
        <div>进校时间：</div>
        <div>{detailList.starttime}</div>
      </div>
      <div className="item">
        <div>离校时间：</div>
        <div>{detailList.update_time}</div>
      </div>
    </div>
    <div className="box-right">
      <div className="item">
        <div>行程码</div>
        <div>
          <Image
            width={100}
            height={100}
            preview={false}
            src="error"
            alt='加载失败'
            fallback={detailList.travelcode}
          />
        </div>
      </div>
      <div className="item">
        <div>疫苗</div>
        <div>
          <Image
            width={100}
            height={100}
            preview={false}
            src="error"
            // alt='加载失败'
            fallback={detailList.vaccination}
          />
        </div>
      </div>
      <div className="item">
        <div>健康宝</div>
        <div>
          <Image
            width={100}
            height={100}
            preview={false}
            src="error"
            alt='加载失败'
            fallback={detailList.healthcode}
          />
        </div>
      </div>
      <div className="item">
        <div>核酸码</div>
        <div>
          <Image
            width={100}
            height={100}
            preview={false}
            src="error"
            // alt='加载失败'
            fallback={detailList.nucleicacid}
          />
        </div>
      </div>
    </div>
  </div>)
}
export default ExcelDeail